<h1 mat-dialog-title>Style editor</h1>

<div class="modal-form-container">
  <form [formGroup]="formGroup">
    <mat-form-field class="form-field">
      <input matInput [ngModelOptions]="{standalone: true}" placeholder="Fill color" type="color" [(ngModel)]="element.fill">
    </mat-form-field>

    <mat-form-field class="form-field">
      <input matInput [ngModelOptions]="{standalone: true}" placeholder="Border color" type="color" [(ngModel)]="element.stroke">
    </mat-form-field>

    <mat-form-field class="form-field">
      <input matInput formControlName="borderWidth" placeholder="Border width" type="number">
    </mat-form-field>
      
    <mat-form-field class="form-field" *ngIf="element.stroke_dasharray">
        <input matInput [ngModelOptions]="{standalone: true}" placeholder="Border style" type="text" [(ngModel)]="element.stroke_dasharray">
    </mat-form-field>

    <mat-form-field class="form-field">
        <input matInput formControlName="rotation" placeholder="Rotation" type="number">
    </mat-form-field>
  </form>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
  <button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
</div>
